<template>
  <div>
      <!-- <h2>修改学生</h2> -->
      <brand></brand>
      <div id="box2">
      <div>学生姓名：<input type="text" class="input" value="name" v-model="student.name"></div>
      <div>学生年龄：<input type="text" class="input" value="age" v-model="student.age"></div>
      <div>学生性别：<input type="radio" value="男" v-model="student.gender" name="sex"> 男 &nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" value="女" v-model="student.gender" name="sex"> 女</div>
      <div>学生专业：
          <select name="" id="" v-model="subjectId">
              <!-- <option value="">请选择</option> -->
              <option :value="item._id" v-for="item in subjects" :key="item._id">{{item.name}}</option>
          </select>
      </div>  
      <div>学生班级：
          <select name="" id="" v-model="classesId">
              <!-- <option value="">请选择</option> -->
              <option :value="item._id" v-for="item in classes" :key="item._id">{{item.name}}</option>
          </select>
      </div>
      <div><button @click="updateStudent()">确认修改</button></div>
      </div>
  </div>
</template>

<script>

import brand from '../common/brand.vue'

export default {
    
    data() {
      return {
        // students:[],
        student:{},
        studentId:'',
        subjects:[],
        subjectId:'',
        classes:[],
        classesId:''
      }
    },

    mounted(){
        this.getSubjects();
    },
    watch:{
        subjectId:{
            handler () {
            // 当侦听的数据发生变化时要执行的操作...
            this.getClassesBySubjectId();
            },
            deep: true // 深度侦听
        }
    },
	components:{
		brand
	},

    methods:{

        //获取专业
        async getSubjects(){
           const {data} = await this.$api.subjects.getSubjects();
           console.log(data.data.rows);
           this.subjects = data.data.rows;
        },

        //获取专业对应的班级
        async getClassesBySubjectId(){
            const {data} = await this.$api.classes.getClassesBySubjectsId(this.subjectId);
            // console.log(data);
            this.classes = data.data.rows;
        },

    //通过id获取要修改的学生
    async getupdateStudent(){
        const {data} = await this.$api.students.getupdateStudent(this.studentsId);
        console.log(data.data);
        this.student = data.data;
        this.subjectId = data.data.subjectsId;
        this.classesId = data.data.classesId;
    },
    
    //修改学生
      async updateStudent(){
          if(this.student.name){
              const {data} = await this.$api.students.updateStudent(this.student._id,this.student.name,this.student.age,this.student.gender,this.classesId,this.subjectId);
          console.log(data);
          this.student={};
          alert('修改成功！');
          this.$router.push('/home/studentsList');
          }else{
              alert('请先选择要修改的学生！');
          }
      },
    },

    //接收要修改的学生的id
    created() {
          console.log(this.$route.params.studentsId);
          if(this.$route.params.studentsId){
              this.studentsId = this.$route.params.studentsId;
              this.getupdateStudent();
          }
    }
}
</script>

<style  scoped lang='scss'>
h2{
  margin: 0;
  margin-bottom: 20px;
}
#box2{
    padding-left: 50px;
    >div{
        margin: 20px 0;
        .input{
            width: 350px;
            height: 36px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            padding: 0;
            padding-left: 10px;
            margin: 0;
            outline: none;
        }
        input:focus{
        border: 1px solid #2f54eb;
        box-shadow:  0px 0px 0 1px #BDE7FF, 0px 0px 0 1px #BDE7FF;
        }
        button{
            width: 100px;
            height: 40px;
            background-color: #2f54eb;
            outline: none;
            border: none;
            color: #fff;
            border-radius: 5px;
            font-size: 14px;
            cursor: pointer;
            &:hover{
                background-color: #5976ef;
            }
        }
        &:last-child{
            margin-top: 20px;
        }
        select{
            width: 360px;
            height: 36px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            padding: 0;
            padding-left: 10px;
            margin: 0;
            outline: none;
        }
    }
}
</style>